<template>
  <view>
    <!-- 首页banner -->
    <view class="banner">
      <view class="logo">
        <image src="/static/aboutUs/aboutUsLogo.jpg"></image>
        <view class="title">
          <image src="/static/aboutUs/hanzi.png"></image>
          <image src="/static/aboutUs/daohang.png"></image>
        </view>
      </view>
      <view class="icon">
        <uni-icons type="phone-filled" size="21"></uni-icons>
      </view>
    </view>
    <!-- 公司介绍 -->
    <view class="company-introduction">
      <text class="title">公司介绍</text>
      <view class="content">
        四川般嘉洛尔软装设计有限公司成立于2019年，专业从事室内软装设计服务，家居配套服务，软装搭配服务为一体的高端软装设计公司。以定制生活理念，扭转软装产品与生活方式为导向。即注重色彩、风格等外在美观性，更注重舒适、结构等内在的功能性。用心地为客户塑造极具特色的室内居家环境！
      </view>
    </view>
    <!-- 企业文化 -->
    <view class="corporate-culture">
      <text class="title">企业文化</text>
      <view class="imgs">
        <view class="big-img">
          <image src="@/static/aboutUs/1.jpg" mode=""></image>
        </view>
        <view class="small-img">
          <image src="@/static/aboutUs/2.jpg" mode=""></image>
        </view>
      </view>
      <!-- 文本 -->
      <view class="texts">
        <view>企业宗旨： 以人为本，以事为先，以身作则</view>
        <view>企业精神： 诚信为本，创新为魂，精益求精</view>
        <view>企业使命： 让每一位忙碌的人·爱归家</view>
        <view>企业价值观：锲而舍之，朽木不折,锲而不舍,金石可镂</view>
        <view>企业愿景： 做西部地区的领跑者</view>
      </view>
      <!-- 结尾大图 -->
      <view class="end-big-img">
        <image src="@/static/aboutUs/3.jpg" mode=""></image>
      </view>
    </view>
    <!-- 五大承诺 -->
    <view class="five-promise">
      <view class="title">
        五大承诺
      </view>
      <view class="content">
        <view>承诺一</view>
        <view>所有产品都是真材实料，假一罚十</view>
        <view>承诺二</view>
        <view>同品同质产品全程最优价，贵一万补一万，贵十万补十万</view>
        <view>承诺三</view>
        <view>预算=决算，不变更项目绝不中途加价，绝不多收业主一分钱</view>
        <view>承诺四</view>
        <view>多对一服务，绝不会出现业主交了钱没人管的情况</view>
        <view>承诺五</view>
        <view>方案不满意修改到业主满意为止</view>
      </view>
    </view>
    <!-- 设计 -->
    <view class="design">
      <view class="design-big-img">
        <image src="@/static/aboutUs/4.jpg"></image>
      </view>
      <view class="design-small-img">
        <view class="left">
          <image src="@/static/aboutUs/5.jpg" class="big"></image>
          <image src="@/static/aboutUs/6.jpg" class="small"></image>
        </view>
        <view class="right">
          <text class="title">设计：</text>
          <text class="content">软装出色，设计出彩，方案里呈现的每一件产品都是实际完工后的产品</text>
        </view>
      </view>
    </view>
    <!-- 结尾售后 -->
    <view class="after-sales-service">
      <view class="big-img">
        <image src="@/static/aboutUs/7.jpg"></image>
      </view>
      <view class="big-img">
        <image src="@/static/aboutUs/8.jpg"></image>
      </view>
      <!-- 左右部分 -->
      <view class="after-sales-service-end">
        <view class="left">
          <image src="@/static/aboutUs/9.jpg"></image>
        </view>
        <view class="right">
          <text class="title">售后</text>
          <text class="content">质保五年，终身维护，定期回访跟踪，不漏掉任何一个小问题，第一时间为您解决</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .banner {
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
      width: 160px;
      height: 50px;
      display: flex;

      image {
        width: 55px;
        height: 50px;
      }

      .title {
        width: 102px;
        height: 50px;

        image {
          width: 100%;
          height: 25px;
        }
      }
    }



    .icon {
      width: 32px;
      height: 32px;
      border-radius: 60px;
      border: 1px solid #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  // 公司介绍
  .company-introduction {

    padding: 0 25px;
    margin-top: 50rpx;

    .title {
      font-size: 24px;
      color: #3D3D3D;
    }

    .content {
      margin-top: 30rpx;
      font-size: 14px;
      color: #3D3D3D;
      text-indent: 2em;
      line-height: 45rpx;
    }
  }

  // 企业文化
  .corporate-culture {
    margin-top: 50rpx;

    .title {
      margin-left: 25px;
      font-size: 24px;
      color: #3D3D3D;
    }

    .imgs {
      margin-top: 30px;

      .big-img {
        width: 100%;
        height: 250px;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .small-img {
        width: 100%;
        height: 125px;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .texts {
      margin-top: 35px;

      view {
        margin-bottom: 20rpx;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        color: #3D3D3D;
        margin-left: 16px;
      }
    }

    .end-big-img {
      margin-top: 35px;
      width: 100%;
      height: 330px;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  // 五大承诺
  .five-promise {
    padding: 0 25px;
    margin-top: 50rpx;

    .title {
      font-size: 24px;
      color: #3D3D3D;
    }

    .content {
      view {
        font-size: 14px;
        color: #3D3D3D;
        line-height: 28px;
      }
    }
  }

  // 设计
  .design {
    margin-top: 50rpx;

    .design-big-img {
      width: 100%;
      height: 187px;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .design-small-img {
      width: 100%;
      height: 190px;
      display: flex;

      .left {
        width: 50%;

        .big {
          width: 100%;
          height: 170px;
          display: block;
        }

        .small {
          width: 100%;
          height: 20px;
        }
      }

      .right {
        width: 50%;
        height: 190px;
        position: relative;

        .title {
          font-size: 24px;
          color: #3D3D3D;
          position: absolute;
          top: 20px;
          left: 30px;
        }

        .content {
          font-size: 14px;
          color: #3D3D3D;
          position: absolute;
          top: 60px;
          left: 30px;
          width: 145px;
        }
      }
    }
  }

  // 售后
  .after-sales-service {
    margin-top: 50rpx;

    .big-img {
      width: 100%;
      height: 250px;

      image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .after-sales-service-end {
      width: 100%;
      height: 333px;
      display: flex;

      .left {
        width: 60%;
        height: 100%;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        width: 40%;
        height: 100%;
        position: relative;

        .title {
          font-size: 24px;
          color: #3D3D3D;
          position: absolute;
          top: 40px;
          left: 25px;
        }

        .content {
          font-size: 14px;
          color: #3D3D3D;
          position: absolute;
          top: 100px;
          left: 25px;
        }
      }
    }
  }
</style>